<template>
    <div>
        <el-card class="card">
            <search :fromLab="fromLab" @onadd="addbtn()" />
        </el-card>
        <el-card class="table">
            <xtable :tabData="tablelab" :tableData="tableData" :page="page" @onEdit="edit" @onCurrent="current">
            </xtable>
        </el-card>
        <xdialog width="100px" ref="xdialogRef" :dialogLab="dialogLab" @formEmit="formEmit">
        </xdialog>
    </div>
</template>

<script setup>
import { ref, reactive } from "vue"
import { menuadd, queryCountAll, menudele,menuUpdata } from "../../../service/index"
import { fromLab } from "./config/search"
import { dialogLab } from './config/dialog'
import { tablelab } from "./config/table"
import search from "../../../components/search/search.vue"
import xdialog from '../../../components/dialog/dialog.vue'
import xtable from "../../../components/table/table.vue"
let xdialogRef = ref(null)
let tableData = ref([])
let page = reactive({
    limit: 10,
    offset: 1,
    count: 0
})

// 添加菜单
function addbtn() {
    // 打开添加弹窗
    xdialogRef.value.isdialog()
}
getmenuall()
function getmenuall() {
    queryCountAll(page).then(res => {

        page.count = res.data.count
        tableData.value = res.data.rows
        // console.log(tableData)
    })
}

function formEmit(e, type) {
    console.log(type.value)
    if (type.value == 0) {
        menuadd(e).then(res => {
            getmenuall()
        })
    }else{
        menuUpdata(e).then(res=>{
            getmenuall()
        })
    }
}
// 点击编辑或删除
function edit(data, type) {
    if (type == 0) {
        console.log(type);
        xdialogRef.value.isformdata(data.row)
        getmenuall()
    }
    if (type == 1) {
        console.log();
        menudele({
            menu_id: data.row.menu_id
        }).then(res => {
            console.log(res)
            getmenuall()
        })
    }
}
</script>

<style lang="less" scoped>
.card {
    margin-bottom: 20px;
}
</style>